<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1550 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="#FFF" d="M133.832 14.791h1282.833q98.68 0 98.68 98.68v789.436q0 98.68-98.68 98.68H133.832q-98.68 0-98.68-98.68V113.47q0-98.68 98.68-98.68Z"/><path fill="#FF6F00" d="M1516.43 576.228h-.345l-1.727 1.086-9.868 6.167h-.246l-9.868 5.921a1956.519 1956.519 0 0 1-160.01 85.604 3087.83 3087.83 0 0 1-391.51 155.026q-154.434 49.932-313.11 85.802c-54.52 12.236-182.952 46.133-346.07 71.641H1376.8a274.773 274.773 0 0 0 86.887 0 98.137 98.137 0 0 0 64.438-103.613l-.69-314.887z"/><path fill="#555" d="M1441.286 30.284a75.835 75.835 0 0 1 73.27 77.957v799.698a75.835 75.835 0 0 1-73.32 77.957H123.175a75.835 75.835 0 0 1-73.368-77.957V108.241a75.835 75.835 0 0 1 73.368-77.957h1318.112m0-15.493H123.174a90.785 90.785 0 0 0-87.972 93.45v799.698a90.785 90.785 0 0 0 87.972 93.746h1318.112a90.785 90.785 0 0 0 88.071-93.746V108.241a90.785 90.785 0 0 0-88.071-93.351z"/><path fill="#303030" d="M174.093 584.468V385.135a9.868 9.868 0 0 1 2.17-.542c22.105 0 44.407-.74 66.264.79a96.41 96.41 0 0 1 82.743 48.45 99.716 99.716 0 0 1-73.072 148.908c-17.565 2.072-35.476 1.283-53.188 1.628-8.142.247-16.283.099-24.917.099zm39.225-34.242c7.401 0 14.358.346 21.265 0a66.658 66.658 0 0 0 41.84-15.246 69.076 69.076 0 0 0 3.356-97.1 81.46 81.46 0 0 0-66.461-18.947v131.293zm1066.528-165.189a7.894 7.894 0 0 1 1.629-.395c22.104 0 44.405 0 66.263.69a84.815 84.815 0 0 1 23.041 4.54 53.139 53.139 0 0 1 37.45 56.346 56.543 56.543 0 0 1-16.135 39.472 57.777 57.777 0 0 1-24.67 13.322l-4.588 1.233 62.76 83.878h-43.962a6.809 6.809 0 0 1-6.71-3.652c-16.233-24.67-32.663-48.747-48.945-73.121-1.678-2.467-3.207-4.589-7.204-3.01v79.437h-38.929zm39.077 91.624a69.52 69.52 0 0 0 35.377-5.33 26.89 26.89 0 0 0 13.667-26.05 25.41 25.41 0 0 0-14.012-24.325 68.632 68.632 0 0 0-34.982-4.44zm-175.106-91.772h109.83v33.699h-70.704v44.405h67.892v33.996h-67.941v53.632h70.9v33.699h-109.977V384.889zm-602.784 18.798-20.328 26.496a43.518 43.518 0 0 0-26.052-15.74 32.466 32.466 0 0 0-28.715 8.339 17.269 17.269 0 0 0 2.664 27.827 212.605 212.605 0 0 0 22.055 10.559c11.299 5.329 22.943 9.868 33.798 16.085a46.133 46.133 0 0 1 23.387 41.1 63.599 63.599 0 0 1-25.805 57.875 74.01 74.01 0 0 1-49.685 12.73 76.97 76.97 0 0 1-61.823-36.906l23.436-25.065a151.473 151.473 0 0 0 13.816 15.64 41.741 41.741 0 0 0 38.978 9.277 26.989 26.989 0 0 0 20.377-31.775 22.696 22.696 0 0 0-12.285-16.035c-7.303-3.652-14.802-6.513-22.5-9.868s-16.38-6.464-24.225-10.362a48.402 48.402 0 0 1-25.706-61.576 57.53 57.53 0 0 1 52.497-41.001 85.95 85.95 0 0 1 64.537 20.328 20.279 20.279 0 0 1 1.579 2.072zm393.337-19.045h40.162c1.233 0 2.91 2.368 3.552 3.947q20.674 51.61 41.1 103.318l10.46 26.15 2.22-4.934 50.08-124.682a4.934 4.934 0 0 1 5.625-4.046h38.239c-.74 1.974-1.283 3.503-1.925 4.934l-82.446 195.978a5.378 5.378 0 0 1-6.119 3.996c-4.49-.246-8.98 0-13.42 0a6.02 6.02 0 0 1-4.391-2.713q-41.594-99.864-82.842-199.826a11.94 11.94 0 0 1-.296-2.122zm-219.908 53.09c-6.266-4.934-11.644-9.424-17.664-13.075a62.316 62.316 0 0 0-74.01 7.795 72.036 72.036 0 0 0 2.862 107.265 64.734 64.734 0 0 0 82.003-2.32l6.76-5.87v42.333a4.638 4.638 0 0 1-3.06 4.934 106.426 106.426 0 0 1-134.549-36.61 104.403 104.403 0 0 1 67.003-159.565 98.68 98.68 0 0 1 67.152 8.388c1.381.69 3.207 2.417 3.207 3.7.345 14.062.296 28.321.296 43.025z"/><path fill="#FF6F00" d="M941.03 484.703a105.834 105.834 0 1 1-105.686-103.17 103.613 103.613 0 0 1 105.686 103.17z"/><path fill="#303030" d="M395.086 584.221H356.6V384.987h38.485z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconDiscove extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
